<template>
    <div class="divBox">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="container">
                    <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition"
                        label-width="100px">
                        <el-row>
                            <!-- <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                                <el-form-item label="国家名称：">
                                    <el-input v-model="from.name" placeholder="请输入国家名称" clearable class="selWidth" />
                                </el-form-item>
                            </el-col> -->
                            <el-col :xs="24" :sm="24" :md="24" :lg="1" :xl="8">
                                <el-form-item label="关键字：">
                                    <el-input v-model="from.keywords" placeholder="请输入搜索的关键字" clearable
                                        class="selWidth" />
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                                <el-form-item>
                                    <el-button class="mr10" size="small" type="primary" @click="search()"><i
                                            class="el-icon-search mar6"></i>搜索</el-button>
                                    <el-button class="mr10" size="small" @click="reset()"><i
                                            class="el-icon-refresh mar6"></i>重置</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="btn_bt">
                    <el-button class="mr10" size="small" type="primary" @click="add()"><i
                            class="el-icon-circle-plus-outline mar6"></i>添加</el-button>
                    <el-button class="mr10" size="small" type="danger" @click="deleteCountry()"><i
                            class="el-icon-delete mar6"></i>删除</el-button>
                </div>
            </div>
            <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
                highlight-current-row @select="selctTable" @select-all="slectTableAll">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="countryId" label="国家主键" min-width="150" />
                <el-table-column prop="countryDomainName" label="国家域名" min-width="100" />
                <el-table-column prop="countryEnglishName" label="国家英文名" min-width="150" />
                <el-table-column prop="countryName" label="国家名称" min-width="150" />
                <el-table-column prop="countryPhoneNumber" label="电话区号" min-width="150" />
                <el-table-column prop="remark" label="描述" min-width="150" />
                <el-table-column prop="createTime" label="创建时间" min-width="150" />
                <el-table-column prop="updateTime" label="更新时间" min-width="150" />

                <!-- <el-table-column prop="status" label="状态" min-width="150">
                    <template slot-scope="scoped">
                        <span v-if="scoped.row.status==1">启用</span>
                        <span v-if="scoped.row.status==2">禁用</span>
                    </template>
</el-table-column> -->


                <el-table-column label="操作" min-width="200" fixed="right" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <!-- <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
                    @size-change="handleSizeChange" @current-change="pageChange" />
            </div>
        </el-card>

        <el-dialog :title="countryShow == 1 ? '新增国家信息' : '修改国家信息'" :visible.sync="dialogVisible" width="40%"
            :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="120px">
                <el-form-item label="国家域名：" prop="countryDomainName">
                    <el-input v-model="ruleForm.countryDomainName" placeholder="请输入国家域名"></el-input>
                </el-form-item>
                <el-form-item label="国家英文名：" prop="countryEnglishName">
                    <el-input v-model="ruleForm.countryEnglishName" placeholder="请输入国家英文名"></el-input>
                </el-form-item>
                <el-form-item label="国家主键：" prop="countryId">
                    <el-input v-model="ruleForm.countryId" placeholder="请输入国家主键" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="国家名称：" prop="countryName">
                    <el-input v-model="ruleForm.countryName" placeholder="请输入国家名称"></el-input>
                </el-form-item>
                <el-form-item label="电话区号：" prop="countryPhoneNumber">
                    <el-input v-model="ruleForm.countryPhoneNumber" placeholder="请输入电话区号"></el-input>
                </el-form-item>
                <el-form-item label="简单描述：" prop="remark">
                    <el-input v-model="ruleForm.remark" placeholder="请输入描述"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {
    langcountryList,
    langcountrySave,
    langcountryInfo,
    langcountryUpdate,
    langcountryDelete,


    getCountry,
    saveCountry,
    updateCountry,
    deleteCountry
} from '@/api/language'
import { themeSave } from '@/api/systemGroup';
export default {
    name: 'country',
    data() {
        return {
            labelPosition: 'right',
            from: {
                // name: '',
                // code: '',
                keywords: "",
                page: 1,
                limit: 15,
            },
            loading: false,
            tableData: {
                data: [],
                total: 0
            },
            dialogVisible: false,
            ruleForm: {
                "countryDomainName": "",
                "countryEnglishName": "",
                "countryId": "",
                "countryName": "",
                "countryPhoneNumber": "",
                "remark": "",
            },
            rules: {
                countryDomainName: [{
                    required: true,
                    message: '请输入国家域名',
                    trigger: 'blur'
                }],
                countryEnglishName: [{
                    required: true,
                    message: '请输入国家英文名',
                    trigger: 'blur'
                }],
                // countryId: [{
                //     required: true,
                //     message: '请输入国家主键',
                //     trigger: 'blur'
                // }],
                countryName: [{
                    required: true,
                    message: '请输入国家名称',
                    trigger: 'blur'
                }],
                countryPhoneNumber: [{
                    required: true,
                    message: '请输入电话区号',
                    trigger: 'blur'
                }],
                remark: [{
                    required: true,
                    message: '请输入描述',
                    trigger: 'blur'
                }],
            },

            countryShow: 1,

            deleteCountrise: [],
            keywords: ""
        };
    },
    mounted() {
        this.getlist();
    },
    methods: {
        search() {
            this.loading = true;
            console.log(this.from)
            let obj = this.from
            getCountry(obj).then(res => {
                console.log(res)
                this.tableData.data = res.list
                this.tableData.total = res.total
                this.loading = false
            }).catch(err => {
                console.log(err)
                this.loading = false
            })
        },
        reset() {
            this.from = {
                page: 1,
                limit: 15,
                keywords:""
            }
            this.getlist()
        },
        add() {
            this.ruleForm = {
                "countryDomainName": "",
                "countryEnglishName": "",
                "countryId": "",
                "countryName": "",
                "countryPhoneNumber": "",
                "remark": "",
            }
            this.countryShow = 1
            this.dialogVisible = true
        },
        handleEdit(row) {
            console.log('编辑', row)

            this.countryShow = 2;


            this.ruleForm = JSON.parse(JSON.stringify(row));
            this.dialogVisible = true;


        },
        handleDel(row) {
            this.$confirm('确认删除？')
                .then(_ => {
                    console.log('删除', row)
                    langcountryDelete([row.id]).then(res => {
                        console.log(res)
                        this.$message.success('删除成功')
                        this.getlist()
                    }).catch(err => {
                        console.log(err)
                        this.$message.error(err)
                    })
                })
                .catch(_ => { });
        },

        deleteCountry() {
            let that = this;
            console.log(that.deleteCountrise)

            if (that.deleteCountrise.length < 1) {
                that.$message.warning('请至少选中一个！')
                return
            }


            let arr = []
            for (var i = 0; i < that.deleteCountrise.length; i++) {
                arr.push(that.deleteCountrise[i].countryId)
            }

            console.log(arr)
            // return

            this.$confirm('确认删除？')
                .then(_ => {
                    deleteCountry(arr).then(res => {
                        console.log(res)
                        this.$message.success('删除成功')
                        this.getlist()
                    }).catch(err => {
                        console.log(err)
                        this.$message.error(err)
                    })
                })
                .catch(_ => { });
        },

        close() {
            this.ruleForm = {
                id: '',
                name: '',
                code: ''
            }
            this.dialogVisible = false
        },
        submit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    if (this.countryShow != 1) {
                        console.log('编辑', this.ruleForm)
                        let data = this.ruleForm

                        updateCountry(data).then(res => {
                            console.log(res)
                            this.$message.success('编辑成功')
                            this.dialogVisible = false;
                            this.getlist()

                        }).catch(err => {
                            console.log(err)
                            this.$message.error(err)
                        })
                    } else {
                        // console.log('新增', this.ruleForm)
                        let data = this.ruleForm
                        console.log('新增', data)


                        saveCountry(data).then(res => {
                            // console.log(res)
                            this.$message.success('新增成功')
                            this.getlist()
                            this.dialogVisible = false;
                        }).catch(err => {
                            console.log(err)
                            this.$message.error(err)
                        })
                    }
                } else {
                    this.$message.error('请填写完整信息')
                }
            });
        },
        getlist() {
            this.loading = true
            //   langcountryList(this.from).then(res => {
            //     console.log(res)
            //     this.tableData.data = res.list
            //     this.tableData.total = res.total
            //     this.loading = false
            //   }).catch(err => {
            //     console.log(err)
            //     this.loading = false
            //   })


            getCountry(this.from).then(res => {
                console.log(res)
                this.tableData.data = res.list
                this.tableData.total = res.total
                this.loading = false
            }).catch(err => {
                console.log(err)
                this.loading = false
            })
        },
        pageChange(page) {
            this.from.page = page
            this.getlist()
        },
        handleSizeChange(val) {
            this.from.limit = val
            this.getlist()
        },

        selctTable(selection) {
            let that = this;
            console.log(selection)
            that.deleteCountrise = selection
        },

        slectTableAll(selection) {
            let that = this;
            console.log(selection)
            that.deleteCountrise = selection
        },
    },
};
</script>
<style scoped lang="scss">
.btn_bt {
    border-top: 1px dashed #ccc;
    padding-top: 20px;
}
</style>
